﻿@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>天气实况</title>
    <style type="text/css">
        /*全局*/
        *{margin: 0;padding: 0;}
        ul{list-style: none;}
        body{padding: 0;margin: 0;font-size: 12px;font-family: '宋体';background-color: #ffffff;}
        img{border: 0px;}
        a{text-decoration: none;}
        a:hover{text-decoration: underline;}
        a, a:focus, a:visited{outline: none;}
        .fleft{float: left;}
        .fright{float: right;}
        .hide{display: none;}
        .show{display: block;}
        .block{display: block;}
        .mg10{margin-left: 10px;}
        .mg9{margin-left: 9px;}
        .mgR5{margin-right: 5px;}
        .clear{clear: both;}
        .ck{cursor: pointer;}
        .txC{text-align: center;}
        .txR{text-align: right;}
        .txL{text-align: left;}
        .b{font-weight: bold;}
        .white{color: #ffffff;}
        .red{color: #ff0000;}
        .back{color: #000000;}
        /*全局*/
        
        .tqsk_btn
        {
            width: 216px;height: 30px;
            left: 40px;
            bottom: 15px;
            margin-top: 10px;
            background: url(/Content/Images/wlive/index_yeqian_qh1.png) no-repeat;
        }
        .tqsk_btn_em
        {
            width: 72px;
            height: 100%;
            float: left;
            font-size: 14px;
            color: Black;
            text-align: center;
            line-height: 31px;
            cursor: pointer;
        }
        .tqsk_btn_em:hover
        {
            color: #98B5E1;
        }
        .tqsk_btn_emOn
        {
            color: #e32500;
        }
        .tqsk_btn_emOn:hover
        {
            color: #e32500;
        }
        
        .tqskdataTop
        {
            width: 100%;
            height: 24px;
            text-align: center;
            font-size: 14px;
            font-weight: bold;
            color: #143a87;
            background: url(/Content/Images/wlive/index_biaotou.png) no-repeat center;
            line-height: 24px;
        }
        .tqskdataMid
        {
            width: 100%;
            height: 130px;
            border-bottom: #D6E5E9 1px solid;
        }
        .tqskctop_r
        {
            width: 100%;
            height: 100%;
            overflow: hidden;
            font-size: 12px;
        }
        .tqskmap
        {
            width: 290px;
            height: 100%;
        }
        .tqskdata
        {
            width: 439px;
            height: 352px;
            margin-top: 10px;
        }
        .live_left{float: left;width: 50%;height: 100%;}
        .live_right{float: right;width: 41%;height: 100%;margin-right: 15px;}
        
        .right_left{float: left;width: 40%;height: 100%;margin-left: 10px;}
        .right_right{float: right;width: 51%;height: 100%;}
        
        .temp_text
        {
            float: left;
            font-size: 16px;
            font-weight: bold;
            margin-left: 5px;
            margin-top: 30px;
            width: 5px;
        }
        
        
        .table_div
        {
            width: 100%;
            border-collapse: collapse;
            margin: 0 auto;
            background-color: #E4F1FD;
            font-size: 12px;
            color: #295395;
            margin-top: 10px;
        }
        .table_div_row
        {
            height: 20px;
            line-height: 20px;
            border-bottom: 1px solid #fff;
        }
        .table_div_left
        {
            width: 55px;
            height: 100%;
            float: left;
            text-align: center;
            padding-left: 5px;
            line-height: 20px;
            border-right: 1px solid #fff;
            color: #1D2122;
        }
        .table_div_right
        {
            width: 110px;
            height: 100%;
            float: left;
            text-indent: 0.5em;
            color: #1D2122;
        }
        .pla_time
        {
            width: 100%;
            height: 25px;
            color: Red;
            text-align: right;
            line-height: 25px;
            padding-right: 10px;
        }
        .tqskc_bottom
        {
            width: 100%;
            height: 202px;
            background-color: #ffffff;
        }
        
        /*温度计*/
        #temp_pic
        {
            margin-left: 5px;
        }
        .temp_-15-
        {
            width: 30px;
            height: 72px;
            float: left;
            margin-left: 25px;
            margin-top: 10px;
            _margin-left: 12px;
            background: url(/Content/Images/wlive/-15-.png) no-repeat;
            _background: none;
            _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',src="/Content/Images/wlive/-15-.png");
        }
        .temp_-15
        {
            width: 30px;
            height: 72px;
            float: left;
            margin-left: 25px;
            _margin-left: 12px;
            margin-top: 10px;
            background: url(/Content/Images/wlive/-15.png) no-repeat;
            _background: none;
            _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',src="/Content/Images/wlive/-15.png");
        }
        .temp_-15-0
        {
            width: 30px;
            height: 72px;
            float: left;
            margin-left: 25px;
            _margin-left: 12px;
            margin-top: 10px;
            background: url(/Content/Images/wlive/-15-0.png) no-repeat;
            _background: none;
            _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',src="/Content/Images/wlive/-15-0.png");
        }
        .temp_0
        {
            width: 30px;
            height: 72px;
            float: left;
            margin-left: 25px;
            _margin-left: 12px;
            margin-top: 10px;
            background: url(/Content/Images/wlive/0.png) no-repeat;
            _background: none;
            _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',src="/Content/Images/wlive/0.png");
        }
        .temp_0-15
        {
            width: 30px;
            height: 72px;
            float: left;
            margin-left: 25px;
            _margin-left: 12px;
            margin-top: 10px;
            background: url(/Content/Images/wlive/0-15.png) no-repeat;
            _background: none;
            _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',src="/Content/Images/wlive/0-15.png");
        }
        .temp_15
        {
            width: 30px;
            height: 72px;
            float: left;
            margin-left: 25px;
            _margin-left: 12px;
            margin-top: 10px;
            background: url(/Content/Images/wlive/15.png) no-repeat;
            _background: none;
            _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',src="/Content/Images/wlive/15.png");
        }
        .temp_15-30
        {
            width: 30px;
            height: 72px;
            float: left;
            margin-left: 25px;
            margin-top: 10px;
            _margin-left: 12px;
            background: url(/Content/Images/wlive/15-30.png) no-repeat;
            _background: none;
            _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',src="/Content/Images/wlive/15-30.png");
        }
        .temp_30
        {
            width: 30px;
            height: 72px;
            float: left;
            margin-left: 25px;
            margin-top: 10px;
            _margin-left: 12px;
            background: url(/Content/Images/wlive/30.png) no-repeat;
            _background: none;
            _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',src="/Content/Images/wlive/30.png");
        }
        .temp_30-45
        {
            width: 30px;
            height: 72px;
            float: left;
            margin-left: 25px;
            _margin-left: 12px;
            margin-top: 10px;
            background: url(/Content/Images/wlive/30-45.png) no-repeat;
            _background: none;
            _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',src="/Content/Images/wlive/30-45.png");
        }
        .temp_45
        {
            width: 30px;
            height: 72px;
            float: left;
            margin-left: 25px;
            _margin-left: 12px;
            margin-top: 10px;
            background: url(/Content/Images/wlive/45.png) no-repeat;
            _background: none;
            _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',src="/Content/Images/wlive/45.png");
        }
        .temp_45U
        {
            width: 30px;
            height: 72px;
            float: left;
            margin-left: 25px;
            _margin-left: 12px;
            margin-top: 10px;
            background: url(/Content/Images/wlive/45+.png) no-repeat;
            _background: none;
            _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',src="/Content/Images/wlive/45+.png");
        }
        
        .temp_text
        {
            float: left;
            font-size: 16px;
            font-weight: bold;
            margin-left: 5px;
            margin-top: 30px;
            width: 5px;
        }
        /*风向*/
        .wind_NE
        {
            width: 110px;
            height: 110px;
            margin: 0 auto;
            margin-top: 10px;
            text-align: center;
            line-height: 110px;
            background: url(/Content/Images/wlive/NE.png) no-repeat;
            _background: none;
            _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',src="/Content/Images/wlive/NE.png");
        }
        .wind_N
        {
            width: 110px;
            height: 110px;
            margin: 0 auto;
            margin-top: 10px;
            text-align: center;
            line-height: 110px;
            background: url(/Content/Images/wlive/N.png) no-repeat;
            _background: none;
            _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',src="/Content/Images/wlive/N.png");
        }
        .wind_E
        {
            width: 110px;
            height: 110px;
            margin: 0 auto;
            margin-top: 10px;
            text-align: center;
            line-height: 110px;
            background: url(/Content/Images/wlive/E.png) no-repeat;
            _background: none;
            _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',src="/Content/Images/wlive/E.png");
        }
        .wind_ENE
        {
            width: 110px;
            height: 110px;
            margin: 0 auto;
            margin-top: 10px;
            text-align: center;
            line-height: 110px;
            background: url(/Content/Images/wlive/ENE.png) no-repeat;
            _background: none;
            _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',src="/Content/Images/wlive/ENE.png");
        }
        .wind_ESE
        {
            width: 110px;
            height: 110px;
            margin: 0 auto;
            margin-top: 10px;
            text-align: center;
            line-height: 110px;
            background: url(/Content/Images/wlive/ESE.png) no-repeat;
            _background: none;
            _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',src="/Content/Images/wlive/ESE.png");
        }
        .wind_NNE
        {
            width: 110px;
            height: 110px;
            margin: 0 auto;
            margin-top: 10px;
            text-align: center;
            line-height: 110px;
            background: url(/Content/Images/wlive/NNE.png) no-repeat;
            _background: none;
            _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',src="/Content/Images/wlive/NNE.png");
        }
        .wind_NNW
        {
            width: 110px;
            height: 110px;
            margin: 0 auto;
            margin-top: 10px;
            text-align: center;
            line-height: 110px;
            background: url(/Content/Images/wlive/NNW.png) no-repeat;
            _background: none;
            _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',src="/Content/Images/wlive/NNW.png");
        }
        .wind_NULL
        {
            width: 110px;
            height: 110px;
            margin: 0 auto;
            margin-top: 10px;
            text-align: center;
            line-height: 110px;
            background: url(/Content/Images/wlive/NULL.png) no-repeat;
            _background: none;
            _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',src="/Content/Images/wlive/NULL.png");
        }
        .wind_NW
        {
            width: 110px;
            height: 110px;
            margin: 0 auto;
            margin-top: 10px;
            text-align: center;
            line-height: 110px;
            background: url(/Content/Images/wlive/NW.png) no-repeat;
            _background: none;
            _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',src="/Content/Images/wlive/NW.png");
        }
        .wind_S
        {
            width: 110px;
            height: 110px;
            margin: 0 auto;
            margin-top: 10px;
            text-align: center;
            line-height: 110px;
            background: url(/Styles/HTML/public/images/liveimg/S.png) no-repeat;
            _background: none;
            _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',src="/Styles/HTML/public/images/liveimg/S.png");
        }
        .wind_SE
        {
            width: 110px;
            height: 110px;
            margin: 0 auto;
            margin-top: 10px;
            text-align: center;
            line-height: 110px;
            background: url(/Content/Images/wlive/SE.png) no-repeat;
            _background: none;
            _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',src="/Content/Images/wlive/SE.png");
        }
        .wind_SSE
        {
            width: 110px;
            height: 110px;
            margin: 0 auto;
            margin-top: 10px;
            text-align: center;
            line-height: 110px;
            background: url(/Content/Images/wlive/SSE.png) no-repeat;
            _background: none;
            _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',src="/Content/Images/wlive/SSE.png");
        }
        .wind_SSW
        {
            width: 110px;
            height: 110px;
            margin: 0 auto;
            margin-top: 10px;
            text-align: center;
            line-height: 110px;
            background: url(/Content/Images/wlive/SSW.png) no-repeat;
            _background: none;
            _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',src="/Content/Images/wlive/SSW.png");
        }
        .wind_SW
        {
            width: 110px;
            height: 110px;
            margin: 0 auto;
            margin-top: 10px;
            text-align: center;
            line-height: 110px;
            background: url(/Content/Images/wlive/SW.png) no-repeat;
            _background: none;
            _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',src="/Content/Images/wlive/SW.png");
        }
        .wind_W
        {
            width: 110px;
            height: 110px;
            margin: 0 auto;
            margin-top: 10px;
            text-align: center;
            line-height: 110px;
            background: url(/Content/Images/wlive/W.png) no-repeat;
            _background: none;
            _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',src="/Content/Images/wlive/W.png");
        }
        .wind_WNW
        {
            width: 110px;
            height: 110px;
            margin: 0 auto;
            margin-top: 10px;
            text-align: center;
            line-height: 110px;
            background: url(/Content/Images/wlive/WNW.png) no-repeat;
            _background: none;
            _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',src="/Content/Images/wlive/WNW.png");
        }
        .wind_WSW
        {
            width: 110px;
            height: 110px;
            margin: 0 auto;
            margin-top: 10px;
            text-align: center;
            line-height: 110px;
            background: url(/Content/Images/wlive/WSW.png) no-repeat;
            _background: none;
            _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',src="/Content/Images/wlive/WSW.png");
        }
    </style>
</head>
<body>
    <div class="tqskdata fleft">
        <div class="tqskdataTop fleft" id="tqsk_stationN">@ViewBag.StationName</div>
        <div class="tqskdataMid fleft">
            <div class="live_left">
                <div class="tqsk_btn">
                    <div class="tqsk_btn_em tqsk_btn_emOn">气温</div>
                    <div class="tqsk_btn_em">降雨</div>
                    <div class="tqsk_btn_em">风速</div>
                </div>

                <div class="table_div">
                    <div class="table_div_row">
                        <div class="table_div_left">气 压</div>
                        <div class="table_div_right" id="qy">暂无数据</div>
                    </div>
                    <div class="table_div_row">
                        <div class="table_div_left">能 见 度</div>
                        <div class="table_div_right" id="visible">暂无数据</div>
                    </div>
                    <div class="table_div_row">
                        <div class="table_div_left">小时雨量</div>
                        <div class="table_div_right" id="ryl">暂无数据</div>
                    </div>
                </div>
                @*<div class="pla_time" id="pla_time"></div>*@
                
            </div>

            <div class="live_right">
                <div class="right_left">
                    <div style="font-size: 12px; letter-spacing: 10px; text-align: center; margin-top: 8px">温 度</div>
                    <div style="width: 100%; height: 80px;">
                        <div id="temp_pic" class="temp_0-15"></div>
                        <div class="temp_text"></div>
                    </div>
                    <div style="font-size: 12px; margin-top: 10px; text-align: center">单 位:℃</div>
                </div>
                <div class="right_right">
                    <div id="wind_dire" class="wind_N"></div>
                </div>
            </div>
            
        </div>
        <div class="tqskc_bottom fleft">
            <div style="width: 100%; height: 185px;" id="chartDiv"></div>
        </div>
    </div>
</body>
</html>
<script src="/Scripts/jquery-1.7.1.min.js"></script>
<script src="/Scripts/FusionCharts/FusionCharts.js"></script>
<script>
    $(document).ready(function () {
        var fcstType = "temp";
        var areaCode = "@ViewBag.StationNum";
        var stationId = "@ViewBag.StationNum";
        /* #region 天气监测观测要素*/
        $(".tqsk_btn_em ").click(function () {
            var observeType = $.trim($(this).html());
            var className = "tqsk_btn_emOn";
            //typeId = $(".tqsk_elms a").index(this) + 1;
            switch (observeType) {
                case "气温":
                    fcstType = "temp";
                    break;
                case "降雨":
                    fcstType = "rain";
                    break;
                case "风速":
                    fcstType = "ff";
                    break;
                case "气压":
                    fcstType = "pa";
                    break;
            }

            $(".tqsk_btn_em").removeClass(className);
            $(this).addClass(className);
            getLineDate(fcstType, areaCode, stationId);
        });
        /* #endregion */
        bindHourData(areaCode, stationId);
        getLineDate(fcstType, areaCode, stationId);
    });

    function setChart(chartSWF, xmlData) {
        var linetype = chartSWF;
        var yjwXml = xmlData;
        var chart1 = new FusionCharts(linetype == "line" ? "/Scripts/FusionCharts/FCF_Line.swf" : "/Scripts/FusionCharts/FCF_Column2D.swf", "chart1Id", "439", "185", "0", "0");
        chart1.setDataXML(yjwXml);
        chart1.render("chartDiv");
    }

    //获取站点观测要素24小时曲线数据，typeid为标识id，1为气温， stationid为自动站ID
    function getLineDate(fcstType, areaCode, stationNum) {
        var unit = "";
        var name = "";
        var linkType = "";
        switch (fcstType.toLowerCase()) {
            //气温                
            case "temp": //温度
                unit = "℃";
                name = "气温";
                linkType = "temp";
                break;
            case "rain": //降雨
                unit = "mm";
                name = "降雨";
                linkType = "rain";
                break;
            case "ff": //风速
                unit = "m/s";
                name = "风速";
                linkType = "ff";
                break;
            case "pa": //气压
                unit = "pa";
                name = "气压";
                break;
        }
        $.ajax({
            type: "GET",
            url: "/Wap/WLiveGetLineData/" + linkType + "-" + areaCode + "-" + stationNum,
            contentType: "application/json",
            //data: { qt: "getweatherlinedata", type: linkType, areacode: areaCode, stationnum: stationNum },
            dataType: 'text',
            //async: false,
            success: function (result) {
                if (fcstType == "rain") { //9为雨量
                    setChart("col", result); //col 为雨量柱状图
                } else {
                    setChart("line", result); //line为曲线图
                }
            },
            error: function () { alert("error"); }
        });
    }

    //绑定站点小时数据
    function bindHourData(areaCode, stationNum) {
        $.ajax({
            type: "GET",
            url: "/Wap/WLiveGetDataPerhour/" + areaCode + "-" + stationNum,
            contentType: "application/json",
            //data: { qt: "getweatherdataperhour", areacode: areaCode, stationnum: stationNum },
            dataType: "json",
            success: function (json) {
                doAjaxHourDataHandler(json);
            },
            error: function (data) {
                alert("异步加载发生错误!");
            }
        });
    }

    /* #region 小时站点数据*/
    function doAjaxHourDataHandler(data) {
        //{"Wd2":3,"Wv2":2.0,"T":10.9,"P":1020.3,"U":16,"gt":10.9,"Njd":19465,"R60":0.0,"ObserveHour":"20150102170000","StationName":"金华"}]
        //var data = eval("(" + txt + ")");
        if (data != null && data != "undefined") {
            if (data.p != null && data.p != "undefined") {
                $("#qy").text(data.p + "hPa");
            } else {
                $("#qy").text("暂无数据");
            }
            if (data.v != null && data.v != "undefined") {
                $("#visible").text(data.v + "m");
            } else {
                $("#visible").text("暂无数据");
            }
            if (data.rain != null && data.rain != "undefined") {
                $("#ryl").text(data.rain + "mm");
            } else {
                $("#ryl").text("暂无数据");
            }

            //时间
            $(".pla_time").text("监测时间：" + GetOBTime(data.observtime));

            //气温
            if (data.t != null && data.t != "undefined") {
                var className = getTempClass(data.t);
                $("#temp_pic").attr("class", "temp_" + className);
                $(".temp_text").text(data.t);
            } else {
                //默认给温度计一个样式 
                $("#temp_pic").attr("class", "temp_0");
                $(".temp_text").text("无数据");
            }

            //风速风向
            if (data.fd != null && data.fd != "undefined") {
                className = ConversionDirection(data.fd);
                $("#wind_dire").attr("class", "wind_" + className).text(data.ff + "m/s");
            } else {
                $("#wind_dire").attr("class", "wind_NULL").text("无数据");
            }

        } else {
            //默认给温度计一个样式 
            $("#temp_pic").addClass("temp_0");
            $(".temp_text").text("无数据");
            $("#wind_dire").addClass("wind_N").text("无数据");
            //$("#xdsd").text("暂无数据");
            $("#ryl").text("暂无数据");
            $("#visible").text("暂无数据");
            $("#qy").text("暂无数据");
        }
    }
    /* #endregion */


    /* #region 异步加载,_type请求方式,_url数据源,_fn_success成功执行函数,_fn_error加载出错*/
    function doAjax(_type, _url, _params, _fn_success, _fn_error) {
        $.ajax({
            type: _type,
            url: _url,
            data: _params,
            dataType: "json",
            success: function (data) {
                eval(_fn_success).call(window, data);
                doAjaxHourDataHandler(data);
            },
            error: function () { eval(_fn_error).call(); }
        });
    }

    function GetOBTime(time) {
        if (time != null && time != "undefined") {
            var ss = [time.substr(0, 4), "-", time.substr(4, 2), "-", time.substr(6, 2), " ", time.substr(8, 2), ":00"].join("");
            return ss;
        }
        return "";
    }

    /* #region 根据温度值转换为相应的CSS类名 */
    function getTempClass(tempCode) {
        var tempClass;
        if (parseInt(tempCode) < -150) tempClass = "-15-";
        else if (parseInt(tempCode) == -150) tempClass = "-15";
        else if (parseInt(tempCode) > -150 && parseInt(tempCode) < 0) tempClass = "-15-0";
        else if (parseInt(tempCode) == 0) tempClass = "0";
        else if (parseInt(tempCode) > 0 && parseInt(tempCode) < 150) tempClass = "0-15";
        else if (parseInt(tempCode) == 150) tempClass = "15";
        else if (parseInt(tempCode) > 150 && parseInt(tempCode) < 300) tempClass = "15-30";
        else if (parseInt(tempCode) == 300) tempClass = "30";
        else if (parseInt(tempCode) > 300 && parseInt(tempCode) < 450) tempClass = "30-45";
        else if (parseInt(tempCode) == 450) tempClass = "45";
        else if (parseInt(tempCode) > 450) tempClass = "45U";
        return tempClass;
    }
    /* #endregion */
    function ConversionDirection(wind) {
        var str = "";
        if (wind == 0 || wind == 0.0) {
            str = "N";
        }
        else if ((wind > 348.76 && wind <= 360) || (wind >= 0 && wind <= 11.25)) {
            str = "N";
        }
        else if (wind > 11.26 && wind <= 33.75) {
            str = "NNE";
        }
        else if (wind > 33.76 && wind <= 56.25) {
            str = "NE";
        }
        else if (wind > 56.26 && wind <= 78.75) {
            str = "ENE";
        }
        else if (wind > 78.76 && wind <= 101.25) {
            str = "E";
        }
        else if (wind > 101.26 && wind <= 123.75) {
            str = "ESE";
        }
        else if (wind > 123.76 && wind <= 146.25) {
            str = "SE";
        }
        else if (wind > 146.26 && wind <= 168.75) {
            str = "SSE";
        }
        else if (wind > 168.76 && wind <= 191.25) {
            str = "S";
        }
        else if (wind > 191.26 && wind <= 213.75) {
            str = "SSW";
        }
        else if (wind > 213.76 && wind <= 236.25) {
            str = "SW";
        }
        else if (wind > 236.26 && wind <= 258.75) {
            str = "WSW";
        }
        else if (wind > 258.76 && wind <= 281.25) {
            str = "W";
        }
        else if (wind > 281.26 && wind <= 303.75) {
            str = "WNW";
        }
        else if (wind > 303.76 && wind <= 326.25) {
            str = "NW";
        }
        else if (wind > 326.26 && wind <= 348.75) {
            str = "NNW";
        }
        return str;
    }

    
</script>
